<template>
  <div class="codemirror-box">
    <codemirror
      v-model="code"
      placeholder="Coding..."
      :style="{ height: '100%' }"
      :autofocus="true"
      :tabSize="2"
      :extensions="extensions"
      v-loading="loading"
    />
    <!--    <el-button class='button' size='small' @click='handleNext'>下一步</el-button>-->
  </div>
</template>

<script setup>
import { Codemirror } from 'vue-codemirror'
import { xml } from '@codemirror/lang-xml'
import { sql } from '@codemirror/lang-sql'
import { oneDark } from '@codemirror/theme-one-dark'
import { EditorView } from '@codemirror/view'
import {sm4Decrypt} from "../../../utils/sm4.js";
import {
  getMapping,
  getCKMapping,
  createPGSql,
  createMysqlTable,
  createsStarrocktsTable,
  createsTableStarrocktsProperties
} from '@/api/datasourceCenter'

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
    required: true
  },
  type: {
    type: String,
    default: '',
    required: true
  }
})

const code = ref('')
const loading = ref(false)
const extensions = [sql(), oneDark]

const handleNext = function () {}
const emits = defineEmits(['mappingData'])
watch(
  () => props.data,
  (val) => {
    if (val) {
      loading.value = true
      console.log(props.type)
      if (props.type === 'ES') {
        getMapping(val)
          .then((res) => {
            code.value = JSON.stringify(JSON.parse(res.data), null, '\t')
            emits('mappingData', code.value)
          })
          .finally(() => {
            loading.value = false
          })
      }
      if (props.type === 'CK') {
        getCKMapping(val)
          .then((res) => {
            code.value = JSON.parse(JSON.stringify(res.data, null, '\t'))
            emits('mappingData', code.value)
          })
          .finally(() => {
            loading.value = false
          })
      }
      if (props.type === 'PG') {
        createPGSql(val)
          .then((res) => {
            code.value = JSON.parse(JSON.stringify(res.data, null, '\t'))
            emits('mappingData', code.value)
          })
          .finally(() => {
            loading.value = false
          })
      }
      if (props.type === 'MySQL') {
        createMysqlTable(val)
          .then((res) => {
            code.value = JSON.parse(JSON.stringify(res.data, null, '\t'))
            emits('mappingData', code.value)
          })
          .finally(() => {
            loading.value = false
          })
      }
      if (props.type === 'Flink') {
        code.value = props.data.code
        console.log(code.value)
        loading.value = false
      }
      if (props.type === 'starrockts') {
        console.log(val)
        createsStarrocktsTable(val)
          .then((res) => {
            code.value = JSON.parse(JSON.stringify(sm4Decrypt(res.data), null, '\t'))
          })
          .finally(() => {
            loading.value = false
          })
      }
      if (props.type === 'starrocktsConfig') {
        createsTableStarrocktsProperties(val)
          .then((res) => {
            code.value = JSON.parse(JSON.stringify(res.data, null, '\t'))
          })
          .finally(() => {
            loading.value = false
          })
      }
    }
  },
  {
    immediate: true
  }
)
watch(
  () => code.value,
  () => {
    emits('mappingData', code.value)
  }
)
</script>

<style lang="scss" scoped>
.codemirror-box {
  height: 100%;
  overflow: auto;
}
</style>
